<template>
  <el-form
    :model="mainForm"
    :rules="mainRules"
    :disabled="disabled"
    ref="mainForm"
    label-width="120px"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="营业执照照片:" prop="roaLicenseImage">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpRoaLicenseRequest"
            :limit="1"
            :file-list="roaLicenseFileList"
            :on-remove="roaLicenseRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="公司名称:" prop="compName">
          <el-input
            size="small"
            v-model="mainForm.compName"
            placeholder="请输入法人名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="营业执照编号:" prop="roaLicenseNo">
          <el-input
            size="small"
            v-model="mainForm.roaLicenseNo"
            placeholder="请输入营业执照编号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="营业执照有效期:" prop="roaLicenseTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaLicenseTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证人像面:" prop="roaCardPositive">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpCardPositiveRequest"
            :limit="1"
            :file-list="roaPositiveFileList"
            :on-remove="roaPositiveRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证国徽面:" prop="roaCardBack">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpCardBackRequest"
            :limit="1"
            :file-list="roaCardBackFileList"
            :on-remove="roaCardBackRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      
      <el-col :span="12">
        <el-form-item label="法人名称:" prop="roaName">
          <el-input
            size="small"
            v-model="mainForm.roaName"
            placeholder="请输入法人名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号:" prop="roaCardNo">
          <el-input
            size="small"
            v-model="mainForm.roaCardNo"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证有效期:" prop="roaCardTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaCardTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </el-form>
</template>

<script>
import { uploadPrivate, uploadOCRCard } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    mainForm: Object,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      mainRules: {
        compName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        roaName: [
          { required: true, message: "请输入法人名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        roaCardNo: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        roaLicenseNo: [
          { required: true, message: "请输入营业执照编号", trigger: "blur" },
        ],
        roaLicenseTime: [
          { required: true, message: "请选择营业执照有效期", trigger: "blur" },
        ],
        roaCardTime: [
          {
            required: true,
            message: "请选择法人身份证有效期",
            trigger: "blur",
          },
        ],
        roaLicenseImage: [
          { required: true, message: "请上传营业执照照片", trigger: "blur" },
        ],
        roaCardPositive: [
          {
            required: true,
            message: "请上传法人身份证人像面",
            trigger: "blur",
          },
        ],
        roaCardBack: [
          {
            required: true,
            message: "请上传法人身份证国徽面",
            trigger: "blur",
          },
        ],
      },
      roaLicenseFileList: [],
      roaPositiveFileList: [],
      roaCardBackFileList: [],
    };
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
        this.imgUrlList[0] = file.url;
        this.imgShow = true;
    },
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 营业执照照片 上传 */
    httpRoaLicenseRequest(option) {
      uploadOCRCard(option.file, "5").then((res) => {
        this.mainForm.roaLicenseImage = res.data.data.link;
        this.mainForm.compName = res.data.data.companyName;
        this.mainForm.roaLicenseNo = res.data.data.creditCode;
        this.mainForm.roaLicenseTime = res.data.data.validToDate;
        this.$refs.mainForm.validateField("roaLicenseImage");
      });
    },
    /* 法人身份证人像面 上传 */
    httpCardPositiveRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        this.mainForm.roaCardPositive = res.data.data.link;
        this.mainForm.roaName = res.data.data.name;
        this.mainForm.roaCardNo = res.data.data.num;
        this.$refs.mainForm.validateField("roaCardPositive");
      });
    },
    /* 法人身份证国徽面 上传 */
    httpCardBackRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.mainForm.roaCardBack = res.data.data.link;
        this.mainForm.roaCardTime = res.data.data.endDate;
        this.$refs.mainForm.validateField("roaCardBack");
      });
    },
    /* 营业执照照片 删除 */
    roaLicenseRemove(file, fileList) {
      this.roaLicenseFileList = fileList;
      this.mainForm.roaLicenseImage = "";
    },
    /* 法人身份证人像面 删除 */
    roaPositiveRemove(file, fileList) {
      this.roaPositiveFileList = fileList;
      this.mainForm.roaCardPositive = "";
    },
    /* 法人身份证国徽面 删除 */
    roaCardBackRemove(file, fileList) {
      this.roaCardBackFileList = fileList;
      this.mainForm.roaCardBack = "";
    },
  },
};
</script>

<style>
</style>